import React, { Component } from 'react';
import './index.css'

export default class Item extends Component {

  state = {
    mouse: false
  }

  handleMouse = (flag) => {
    return () => {
      this.setState({ mouse: flag })
    }
  }

  handleChange = (id) => {
    return (e) => {
      const { checked } = e.target;
      this.props.updateTodo(id, checked);
    }
  }

  handleRemove = (id) => {
    return () => {
      if(window.confirm('确定删除吗？')){
        this.props.removeTodo(id)
      }
    }
  }

  render() {

    const {id, name, done} = this.props.todo;
    const { mouse } = this.state;
    // console.log(id, name, done);
    // console.log(this.props);
    return (
      <div
        className='Item'
        onMouseEnter={ this.handleMouse(true) }
        onMouseLeave={ this.handleMouse(false) }
        style={{ backgroundColor: mouse ? '#ddd' : 'white'  }}
      >
        <input type="checkbox" checked={ done } onChange={ this.handleChange(id) }/>
        <span>{ name }</span>

        <button className='btn' onClick={ this.handleRemove(id)}>删除</button>
      </div>
    )
  }
}
